<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;list-style: none;}
        #box{
            width:700px;
            height:530px;
            margin:30px auto;
            position: relative;
            }
        #header{
            width:100%;
            height:40px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            text-align: center;
            color:#ffffff;
            font-size: 20px;
            line-height: 40px;
        }
        #left{
            width:50px;
            height:80px;
            background: rgba(0, 0, 0, 0.5);
            left:0px;
            top:210px;
            color:#ffffff;
            font-size: 40px;
            line-height: 80px;
            text-align: center;
            position: absolute;
        }
        #right{
            width:50px;
            height:80px;
            background: rgba(0, 0, 0, 0.5);
            right:0px;
            top:210px;
            color:#ffffff;
            font-size: 40px;
            line-height: 80px;
            text-align: center;
            position: absolute;
        }
        #bottom{
            width:100%;height:40px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            bottom:0px;
            text-align: center;
            color:#ffffff;
            font-size: 20px;
            line-height: 40px;
        }
        p{
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 80px;
            text-align: center;
            line-height: 50px;
        }
        span{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #ffffff;
            display: inline-block;
            margin-right: 20px;
        }
        span.active{
            background: coral;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="header">1/4</div>
        <div id="left"><</div>
        <div id="right">></div>
        <img src="image/1.jpg" alt="" id="imgs">
        <div id="bottom">美女1</div>
        <p>
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
    <script>
        //1、建立数据源
        var arr = [
            {
                "title":"美女1",
                "imgsrc":"image/1.jpg"
            },
            {
                "title":"美女2",
                "imgsrc":"image/2.jpg"
            },
            {
                "title":"美女3",
                "imgsrc":"image/3.jpg"
            },
            {
                "title":"美女4",
                "imgsrc":"image/4.jpg"
            }
        ]
        //2、该获取页面中所需要的元素
        var header = document.getElementById("header");
        var bottom = document.getElementById("bottom");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var imgs = document.getElementById("imgs");
        var span = document.getElementsByTagName("span");
        var box = document.getElementById("box");
        for(var i = 0;i<span.length;i++){
            span[i].index = i;
            span[i].onclick = function(){
                for(var j = 0 ; j<span.length;j++){
                    span[j].className = "";
                }
                //点谁，谁有颜色
                this.className = "active";
                bottom.innerText = arr[this.index].title; //arr[1]['title']
                imgs.src = arr[this.index].imgsrc; //arr[1]['imgsrc']
                header.innerText = (this.index+1)+'/'+arr.length;
                //在点击小圆圈的时候，通知左右两侧的n，下标从this.index的位置开始在继续加或者减
                n = this.index; //下标一致!!!
                console.log(n);
            }
        }
        //4、借助于变量
        var n = 0
        //3、给左右两个div添加点击事件
        right.onclick = function(){
            //5、每点击一次更新一下n的值
            n++;
            console.log(n);
            //6、在设置之前判断当前n的变化边界
            if(n==arr.length){
                //会第一张
                n = 0;
            }
            for(var i = 0 ; i < span.length;i++){
                span[i].className = "";
            }
            span[n].className = "active";
            // console.log(arr[1]);
            //分别拿出对象中的值并且赋予标签
            bottom.innerText = arr[n].title; //arr[1]['title']
            imgs.src = arr[n].imgsrc; //arr[1]['imgsrc']
            header.innerText = (n+1)+'/'+arr.length;
        }
        left.onclick = function(){
            n--;
            if(n<0){
                n = arr.length - 1;
            }
            console.log(n);
            for(var i = 0 ; i < span.length;i++){
                span[i].className = "";
            }
            span[n].className = "active";
            bottom.innerText = arr[n].title; //arr[1]['title']
            imgs.src = arr[n].imgsrc; //arr[1]['imgsrc']
            header.innerText = (n+1)+'/'+arr.length;
        }

        //自动发生轮播 -- 定时器（一次性定时器、周期性定时器）
        var timer = setInterval(autoNext,3000); // 1
        function autoNext(){
            n++;
            //设置边界
            if(n==arr.length){
                n = 0;
            }
            //每间隔3s换图片，换文字标题以及序号
            bottom.innerText = arr[n].title; //arr[1]['title']
            imgs.src = arr[n].imgsrc; //arr[1]['imgsrc']
            header.innerText = (n+1)+'/'+arr.length;
            for(var i = 0 ; i < span.length;i++){
                span[i].className = "";
            }
            span[n].className = "active";
        }

        //当前鼠标移入到整体区域停止轮播，移出继续
        box.onmouseover = function(){
            //停止定时器
            clearInterval(timer);
        }
        box.onmouseout = function(){
            timer = setInterval(autoNext,3000); //在刚才的定时器上进行重新赋值  2
        }
    </script>
</body>
</html>